﻿@using Share.Models
@model Category

@{
Layout = null;

<script type="text/javascript">
    $(document).ready(function () {
        slider.init('slider', 1);
    });
</script>
<style type="text/css">
    #slider
    {
        padding-right:10px;
    }
    .header
    {
        border: 1px solid #eee;
        padding: 5px;
        font-weight: bold;
        margin-top: 5px;
        cursor: pointer;
        background-color: #fee;
    }
    .header:hover
    {
        background-color: #fdd;
    }
    .text
    {
        border: 1px solid #eee;
        border-top: none;
    }
    .text ul
    {
        padding: 0px;
        margin: 0px;
    }
    .text ul li
    {
        list-style-type: none;
        border-bottom:1px dotted #eee;
    }
    .text ul li:last-child
    {
        border-bottom:none;
    }
    .text ul li a{
        font:large;
        display:block;
        padding:5px;
    }
    .text ul li a:hover
    {
        background-color:#eee;
    }
</style>
int i = 0;
string[] words = { "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" };
<div id="slider">
  @foreach (Category cat2 in Model.SubCategories)
  {
  <div class="header" id="@words[i]-header"><a href="/Category/Index/@cat2.ID">@cat2.Name</a></div>
  <div class="content" id="@words[i]-content">
    <div class="text">
    <ul>
    @foreach (Category cat3 in cat2.SubCategories)
    {
        <li><a href="/Category/Index/@cat3.ID">@cat3.Name</a></li>
    }
    </ul>
    </div>
  </div>
    i++;
  }
</div>
}